<template>
  <div
    :class="[css_wind_light_hover, css_content_padding, css_child_margin_top]"
    class="tag_title"
    id="tag_title"
  >
    <div class="static_tag">
      <span class="tag_title_title">名</span>
    </div>

    <KeyVal_node
      :id="spacename_tag_title"
      :for_form="cur_prop.for_form"
    ></KeyVal_node>

    <div
      :class="[css_wind_light_hover, css_content_padding]"
      class="title_writable_area"
      id="title_writable_area"
      :contenteditable="true"
      placeholder="名"
      tabindex="0"
    >
      123
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

import './tag_title.css';
import {
  css_child_margin_top,
  css_content_padding,
  css_wind_light_hover,
} from '../../../../../../../../../../global/element/DataDefine/sourceData';
import KeyVal_node from '../../../../../../../../../../global/element/form_table/keyVal_node/keyVal_node.vue';
import { spacename_tag_title } from './DataDefine/sourceData';
import { tag_title_prop } from './Classes/cla_tag_title_prop';
import { init_tag_title } from './tag_title';

/**
 * @type {tag_title_prop}
 */
let cur_prop = defineProps(new tag_title_prop());

onMounted(() => {
  init_tag_title(cur_prop);
});
</script>
